<template>
    <div class="main">
        <!--登录卡片-->
        <el-row class="login_card">
            <el-col :span="7" :offset="8">
                <el-card class="box-card basic_shadow ">
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col :span="10">
                            <h1 style="text-align: center">用户注册</h1>
                        </el-col>
                    </el-row>
<!--                    <el-row type="flex" class="row-bg" justify="center">-->
<!--                        <el-col :span="7">-->
<!--                            <h3 style="text-align: center">账号密码登录</h3>-->
<!--                        </el-col>-->
<!--                    </el-row>-->

                    <el-form :model="registerForm" label-width="80px" class="demo-ruleForm login_form" :rules="rules" ref="registerForm">
                        <div>
                            <el-form-item label="用户名：" prop="adminName" >
                                <el-input v-model="registerForm.adminName" clearable placeholder="用户名" maxlength="16" autocomplete="true"></el-input>
                            </el-form-item>
<!--                            <el-form-item label="用户名：" prop="name" >-->
<!--                              <el-input v-model="loginForm.name" clearable placeholder="用户名登录" maxlength="16" autocomplete="true"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item label="密码：" prop="password" class="password">
                                <el-input placeholder="密码" v-model="registerForm.password" show-password clearable maxlength="16" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register" style="width: 100%;">注册</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                    <el-row type="flex" justify="end">
                        <el-col :span="5" >
<!--                            <el-link type="success" href="http://localhost:8080/#/reg">注册新账号</el-link>-->
                            <el-link type="success" href="/login">已有账号?去登陆</el-link>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <!--版权信息-->
        <el-row type="flex" justify="end" class="judge_footer" >
            <el-col :span="6" >
                <footer> <!--底部版权-->
                    Copyright © 2020 starwish.
                    <!--            <a href="javascript:void(0)" style="color: #868a6f;">All Rights Reserved.</a>-->
                    <el-link href="javascript:void(0)">All Rights Reserved.</el-link>
                </footer>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
              var checkName = (rule, value, callback) => {

              /*检测用户名必须以 下划线或字母开头（大小写都可）*/
              var firstChar = value.charAt(0);
              if ((firstChar < 'A' || firstChar > 'z') || (firstChar > 'Z' && firstChar < 'a' && firstChar !== '_')){
                callback(new Error("请输入有效的用户名！"));
              }


              //检测用户名是否只包含 字母 下划线和数字
              for (let i = 0; i < value.length; i++){
                let char = value.charAt(i);
                if (char < '0' || (char > '9' && char < 'A') || char > 'z'){
                  callback(new Error("请输入有效的用户名！"));
                }
                // char 在 Z 和 a 之间
                if (char > 'Z' && char < 'a' && char !== '_'){
                  callback(new Error("用户名只能包含字母、数字和下划线"));
                }
              }

              //重名认证
              let url = 'user/checkRepeatName';
              let code = false;
              this.$axios.get(url, {
                params: {
                  username: value
                }
              }).then(res => {
                if(res.data.code==201){
                 return callback(new Error("用户名已被占用！"))
                }else {
                  return callback();
                }
              });
            };
            return{
                registerForm: {
                    nickname:'',
                    adminName: '',
                    password: ''
                },
                rules: {
                  adminName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },  /*这里设置不触发，在点击登录时 统一验证*/
                        { min: 6, max: 16, message: '请输入有效的用户名！', trigger: 'blur' },
                        { validator: checkName, trigger: 'blur' }
                    ],
                    password: [
                        { required:true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
            };
        },
        methods: {
            register(){
              this.$refs.registerForm.validate(valid => {
                if (!valid) {
                  return;
                } else {
                  let url = 'user/register';
                  this.$axios.post(url, this.registerForm)
                      .then(res => {
                        if (res.data.code == 200) {
                          this.$message({
                            message: res.data.msg,
                            type: 'success',
                            duration: 1000
                          });
                        } else {
                          this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 1000
                          });
                        }
                      })
                }
              });
            }
        }
    };
</script>

<style scoped>

    /*同注册 版权信息*/
    footer{
        background-color: rgba(240, 248, 255, .6);
        height: 52px;
        line-height: 52px;
        font-size: medium;
        border-radius: 5px;
        text-align: center;
    }

    /*账号密码登录字样 h3*/
    h3 {
        margin-top: 30px;
        margin-bottom: 22px;
    }

    /*跳转至首页的提示*/
    .to_index_tip{
        position: absolute;
        left: 822px;
        top: 235px;
    }
    /*且慢！*/
    .to_index_tip > div:first-child{
        position: relative;
        left: -31px;
    }

    /*调整footer位置*/
    .judge_footer{
        margin-top: 100px;
    }

    /*登录信息框  用户名密码 登录按钮*/
    .login_form{
        padding-right: 70px;
        padding-left: 20px;
    }
    /*登录卡片 row*/
    .login_card{
        padding-top: 200px;
    }

    /*整个页面*/
    .main{
        background-image: url("../assets/images/login_bgimg.jpg");
        /*height: 1000px;*/
        background-size: 100% 100%;  /*图片放满  （原比例可能受到影响）*/
        /*background-size: cover;  !*等比例放大或缩小  直至覆盖整个屏幕   原图片内容可能不完全显示*!*/
        background-repeat: no-repeat;
        /*height: 856px;*/
        height: 100%;  /*正好占满整个浏览器的高度（不同屏幕下高度可能不一样，但都能占满）*/
        /*height: 1100px;*/
    }
</style>